import React, { useState } from 'react';
import * as styles from '../styles/view.scss';
import Base from './base';

export default (props) => {
    const { property } = props;
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);

    property.setIsVisible = (v) => { property.isVisible = v; setIsVisible(v); };

    if (!isVisible) return null;

    const className = Base.getClassName(property, styles);

    const { height } = property;
    let style;
    if (height) style = { width: '100%', height, ...property.style || {} };
    else style = property.style;

    return <div className={className} style={style}></div>;
};